<template>
  <div class="catalogManagement">
    <el-row>
      <dynForm
        :info-form="search"
        :search-tags="searchTags"
        :select-list="selectList"
      >
        <el-button
          type="primary"
          icon="el-icon-search"

          @click="doSearch"
        >
          {{ $t("search") }}</el-button
          >
      </dynForm>
    </el-row>
    <div class="table-buttons">
      <el-button
        v-btnPermission:add
        type="primary"
        icon="el-icon-plus"
        @click="newAdd"
      >
        {{ $t("add") }}</el-button
        >
      <el-button
        v-btnPermission:edit
        :disabled="UpdateDisabled"
        type="primary"
        icon="el-icon-edit"

        @click="modify"
      >
        {{ $t("modify") }}</el-button
        >
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"

        @click="doDelete"
      >
        {{ $t("delete") }}</el-button
        >
    </div>
    <el-card class="box-card" shadow="never">
      <el-row>
        <el-col :span="24">
          <el-table
            ref="multipleTable"
            :data="tableData"
            :header-cell-style="{background: '#F5F7FA'}"
            :tree-props="{ children: 'children' }"
            row-key="id"
            border
            tooltip-effect="dark"
            stripe
            fit
            @selection-change="handleSelectionChange"
            @row-click="rowClick"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
            />
            <el-table-column
              :label="`${$t('categoryName')}`"
              prop="categoryName"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column :label="$t('status')" prop="valid" align="center" show-overflow-tooltip/>
            <el-table-column :label="$t('updateLog')" prop="remark" align="center" show-overflow-tooltip/>
            <el-table-column :label="$t('testProgramSuffix')" prop="suffix" align="center" show-overflow-tooltip/>
            <el-table-column :label="$t('creator')" prop="creator" align="center" show-overflow-tooltip/>
            <el-table-column :label="$t('createTime')" prop="createTime" align="center" show-overflow-tooltip/>
            <el-table-column :label="$t('editor')" prop="editor" align="center" show-overflow-tooltip/>
            <el-table-column :label="$t('editTime')" prop="editTime" align="center" show-overflow-tooltip/>
          </el-table>
        </el-col>
      </el-row>
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <dialogForm
      ref="dialogForm"
      :title="title"
      @initList="initList"
    />
  </div>
</template>

<script>
import programApi from '@/api/testprogram/catalogManagement'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import dialogForm from './components/dialogForm'
export default {
  name: 'CatalogManagement',
  components: { dialogForm },
  mixins: [mySetting, networkTips],
  props: {},
  data() {
    return {
      search: {},
      searchTags: [
        { label: this.$t('categoryParentName'), prop: 'categoryName', tag: 'DynSelect' },
        { label: this.$t('categoryName'), prop: 'cname', tag: 'DynSelect' }
      ],
      selectList: {},
      dialogForm: {},
      formDisable: false,
      title: '',
      tableData: []
    }
  },
  created() {
    this.initList()
    this.getParentList()
    this.getCategoryList()
  },
  mounted() {},
  methods: {
    // 初始化列表
    initList() {
      programApi.getList(this.$clearNull({ ...this.listQuery, ...this.search })).then((res) => {
        this.tableData = res.data
        this.total = res.total || 0
      })
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    // 获取分类父名称
    async getParentList() {
      const res = await programApi.getParentList()
      this.$set(this.selectList, 'categoryName', res.data)
    },
    // 获取分类子名称
    async getCategoryList() {
      const res = await programApi.getCategoryList({ id: this.search.categoryName })
      this.$set(this.selectList, 'cname', res.data)
    },
    // 新增
    newAdd() {
      // this.dialogForm = {};
      this.title = this.$t('add')
      this.$refs.dialogForm.openDialog()
    },
    modify() {
      // 简单的深拷贝，不想调接口了
      // this.dialogForm=Object.assign({},this.multipleSelection[0])
      const newObj = Object.assign({}, this.multipleSelection[0])
      this.formDisable = true
      this.title = this.$t('modify')
      this.$refs.dialogForm.openDialog(newObj)
    },
    // 删除
    doDelete() {
      this.$confirm(
        this.$t('confirmDelete') +
          this.multipleSelection.length +
          this.$t('recordCount'),
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        // const ids = this.multipleSelection.map((ele) => {
        //   return ele.id
        // })
      })
    },
    getList(val) {
      this.listQuery = val
      this.initList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 当某一行被点击时
    rowClick(val, column, event) {
      this.multipleSelection.push(val)
      this.$refs.multipleTable.clearSelection(val)
      this.$refs.multipleTable.toggleRowSelection(val)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
// .el-form-item {
//   margin-bottom: 16px;
// }
// .catalogManagement .el-row:nth-child(1) {
//   padding-bottom: 0;
// }
// ::v-deep .el-table td {
//   padding: 4px 0;
// }
// ::v-deep .el-table th, .el-table td {
//   padding: 6px 0;
// }
</style>
